import Hover from "ol-ext/interaction/Hover"
import Popup from "ol-ext/overlay/Popup"
import "ol-ext/overlay/Popup.anim.css"
import "ol-ext/overlay/Popup.css"
import { getMainMap } from "./MainMap"
import { isMeasuring } from "./measurelib"

export function standardFeatureBrief(feature) {
    return `
    <div>
        <div><span style="font-size: 1.5em; font-weight: bold">蒙太奇大漩涡</span>
            <span style="color: #AAA; font-size: small">
                9:00-22:00
            </span>
        </div>
        <img src="http://www.gstxdpxt.com/userlist/gstxdpxt/data/userpic/20130719212061.jpg" style="width: 200px"/>
    </div>
    `
}

let featureBriefFunction = standardFeatureBrief;

let isShowing = false;

export function usesFeatureBrief(featureBrief) {
    featureBriefFunction = featureBrief;
}

export function addHoverEvent() {
    const popup = new Popup({
        popupClass: "default anim",
        positioning: 'auto',
        autoPan: true,
        autoPanAnimation: { duration: 100 }
    });
    getMainMap().addOverlay(popup);
    const hover = new Hover({});
    getMainMap().addInteraction(hover);
    hover.on('enter', e => {
        if (!isMeasuring()) {
            const geometry = e.feature.getGeometry();
            if (geometry.getType() === "Point") {
                popup.show(geometry.getCoordinates(),
                    featureBriefFunction(e.feature));
                isShowing = true;
            }

        }
    });
    hover.on('leave', e => {
        if (isShowing) {
            popup.hide()
            isShowing = false;
        }
    })
}
